<template>
	<!-- 盘点 -->
	<view class="content">
		<blueTeethBtn></blueTeethBtn>
		<view class="oneCard">
			<view class="line-view">
				<uni-data-select
					v-model="formData.id"
					:localdata="list"
					placeholder="请选择盘点方案"
					@change="selectChange"></uni-data-select>
			</view>
			<!-- 扫描 -->
			<view class="line-view">
				<uni-easyinput
					border
					v-model="formData.code"
					:focus="canFocusOne"
					placeholder="扫描仓位"
					@focus="formData.code = ''"
					@confirm="confirmOne" />

				<uni-easyinput
					v-model="goodsCode"
					border
					:focus="canFocus"
					placeholder="扫描条码"
					@focus="goodsCode = ''"
					@confirm="confirmGoods"
					style="margin-left: 5rpx" />
			</view>
			<view class="line-view">
				<uni-easyinput
					v-model="formData.productCode"
					border
					placeholder="请输入物料条码"
					@focus="formData.productCode = ''"
					@confirm="confirmGoods" />
			</view>
			<view
				class="line-view"
				v-if="factoryName"
				style="font-size: 30rpx; padding-left: 5rpx; color: #777">
				组织名称：{{ factoryName }}
			</view>
			<view
				class="line-view"
				v-if="backList.name"
				style="font-size: 30rpx; padding-left: 5rpx; color: #777">
				仓位名称：{{ backList.name }}
			</view>
			<!-- <u-button type="primary" size="mini" @click="changeModification(index,indexLit)">盘改</u-button> -->
		</view>

		<view
			style="
				position: sticky;
				top: 0;
				left: 0;
				z-index: 98;
				background-color: #fff;
				padding: 15rpx 25rpx;
			"
			v-if="formData.id && backList.name">
			<u-subsection
				:list="tabList"
				:current="0"
				active-color="#217EF8"
				mode="subsection"
				@change="tabChange"></u-subsection>
		</view>

		<u-form label-width="190">
			<view
				class="flexFull"
				style="margin-top: 25rpx">
				<view
					v-for="(item, index) in formModel"
					:key="index"
					class="oneCard"
					style="margin-bottom: 40rpx; position: relative">
					<div
						class="isInventory-view"
						v-if="item.isInventory == 1">
						已 盘
					</div>
					<u-form-item>
						<view style="margin-left: auto; padding: 15rpx 0">
							<u-button
								type="primary"
								size="mini"
								style="font-size: 28rpx"
								@click="doPrint(item)">
								打印
							</u-button>
						</view>
					</u-form-item>
					<u-form-item label="物料代码">
						<text style="font-weight: 700">{{ item.productCode }}</text>
					</u-form-item>
					<u-form-item label="物料名称">{{ item.productName }}</u-form-item>
					<u-form-item label="规格型号">{{ item.productModel }}</u-form-item>
					<u-form-item label="批 号">
						{{ item.barcode }}
					</u-form-item>
					<u-form-item
						label="实 盘"
						v-if="item.isInventory == 1">
						{{ item.quality }}
					</u-form-item>
					<u-form-item
						label="实盘辅助数量"
						v-if="item.isInventory == 1 && item.auxUnitId">
						{{ item.auxQuality }}
					</u-form-item>
					<u-row>
						<u-col :span="10">
							<!-- <u-form-item
                label="实盘辅助数量"
                v-if="item.isInventory == 1 && item.auxUnitId">
                {{ item.auxQuality }}
              </u-form-item> -->
						</u-col>
						<u-col
							:span="2"
							text-align="right">
							<view
								style="
									display: flex;
									justify-content: space-between;
									padding: 15rpx 0;
								">
								<u-button
									size="mini"
									style="font-size: 28rpx"
									@click="changeModification(index)"
									v-if="item.isReviewInventory != 1">
									修改
								</u-button>
								<view
									v-else
									style="color: #b1b1b1; font-size: 30rpx">
									已复盘
								</view>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</u-form>

		<div class="pagination-view">
			<uni-pagination
				:current="page"
				:total="totalElements"
				:show-icon="false"
				@change="pageChange"
				:pageSize="pageSize"
				style="width: 720rpx" />
		</div>

		<u-modal
			v-model="showModel"
			:show-cancel-button="true"
			@confirm="confirmChange()"
			negative-top="350"
			title="盘点修正">
			<view class="modelBox">
				<u-form
					ref="uForm"
					label-width="140">
					<u-form-item label="批号">
						<view
							class=""
							style="padding-left: 20rpx">
							{{ formChange.barcode }}
						</view>
					</u-form-item>
					<u-form-item
						label="盘点数量"
						:border-bottom="false">
						<uni-easyinput
							v-model="formChange.inputNumber"
							focus
							:inputBorder="false"
							placeholder="输入盘点数量"></uni-easyinput>
					</u-form-item>
					<u-form-item
						label="辅助数量"
						:border-bottom="false"
						v-if="formChange.auxUnitId">
						<uni-easyinput
							v-model="formChange.inputNumberAux"
							focus
							:inputBorder="false"
							placeholder="输入辅助数量"></uni-easyinput>
					</u-form-item>
					<!-- <u-form-item label="账面数量:">
						<view class="innerText">{{ formChange.availableQuality }}</view>
					</u-form-item> -->
				</u-form>
			</view>
		</u-modal>
		<u-toast ref="uToast" />
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
var that;
import * as bter from '@/components/printCom/bter.js';
import * as zksdk from '@/components/printCom/bluetoolth.js';
import blueTeethBtn from '@/components/blueTeethBtn/blueTeethBtn.vue';
export default {
	components: {
		blueTeethBtn,
	},
	data() {
		return {
			page: 1,
			pageSize: 10,
			totalElements: 0,
			factoryName: null,
			tabIndex: 0,
			tabList: [
				{
					name: '全部',
				},
				{
					name: '未盘',
				},
				{
					name: '已盘',
				},
			],
			factoryId: null,
			backList: {},
			show: false,
			showModel: false,
			goodsCode: '',
			list: [],
			formData: {
				name: '',
				code: '',
				id: '',
				planMaterialQty: null,
				planBarcodeQty: null,
				size: 5,
				productCode: '',
			},
			formModel: [],
			formChange: {},
			indexOut: 0,
			indexInner: 0,
			canFocusOne: false,
			scrollTop: 0,
			canFocus: false,
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onLoad() {
		that = this;
		this.initOptions();
	},
	onShow() {
		if (that.formData.id && that.backList.id) {
			that.confirmOne();
		}
	},
	// onReachBottom() {
	// 	uni.showLoading({
	// 		mask: true,
	// 		title: '加载中...',
	// 	});
	// 	this.pege = this.page++;
	// 	that.getList();
	// },
	onNavigationBarButtonTap() {
		if (!that.formData.id) {
			this.$refs.uToast.show({
				title: '请选择盘点方案',
				type: 'error',
			});
			return false;
		}

		if (!that.backList.name) {
			this.$refs.uToast.show({
				title: '请扫描仓位',
				type: 'error',
			});
			return false;
		}
		uni.navigateTo({
			url:
				'addTakeStock?inventoryPlanId=' +
				that.formData.id +
				'&factoryId=' +
				that.factoryId +
				'&stockPositionId=' +
				that.backList.id,
		});
	},
	methods: {
		doPrint(e) {
			uni.showModal({
				title: '提示',
				content: '是否打印此条数据？',
				success: function (res) {
					if (res.confirm) {
						that.writeBLECharacteristicValue(e);
					}
				},
			});
		},

		// 发送二进制数据
		writeBLECharacteristicValue(obj) {
			// obj = {
			//   stackCode: '202310080002', //堆码
			//   projectNumber: 'YD230928', //项目号
			//   materialCode: 'SEW007812112', // 图号
			//   materialName: '立柱焊接T909L.2.11.2', //物料名称
			// };
			let deviceId = getApp().globalData.deviceId;
			if (!deviceId) {
				uni.showToast({
					icon: 'none',
					title: '缺少设备Id,请去蓝牙页面设置',
				});
				return;
			}
			let strCmd = zksdk.CreatCPCLPage(576, 400, 1, 0);
			strCmd += zksdk.addCPCLQRCode(340, 20, 'Q', 2, 7, obj.barcode);
			strCmd += zksdk.addCPCLText(80, 20, '7', '2', 0, obj.barcode);
			strCmd += zksdk.addCPCLText(10, 80, '7', '2', 0, '编号:');
			strCmd += zksdk.addCPCLText(100, 80, '7', '2', 0, obj.productCode);
			strCmd += zksdk.addCPCLText(10, 150, '7', '2', 0, '单位:');
			strCmd += zksdk.addCPCLText(100, 150, '7', '2', 0, obj.productUnitName);
			strCmd += zksdk.addCPCLText(10, 220, '7', '2', 0, '名称:');
			strCmd += zksdk.addCPCLText(100, 220, '7', '2', 0, obj.productName);
			strCmd += zksdk.addCPCLText(10, 290, '7', '2', 0, '规格:');
			strCmd += zksdk.addCPCLText(100, 290, '7', '2', 0, obj.productModel);
			strCmd += zksdk.addCPCLGAP();
			strCmd += zksdk.addCPCLPrint();
			bter.BTER.printSomething(strCmd);
		},
		pageChange(e) {
			uni.showLoading({
				mask: true,
				title: '加载中...',
			});
			that.page = e.current;
			that.getList();
		},
		tabChange(e) {
			that.tabIndex = e;
			// 0全部 1未 2已
			that.page = 1;
			that.formModel = [];
			uni.showLoading({
				mask: true,
				title: '加载中...',
			});
			that.getList();
		},
		getList() {
			var param = {};
			param.planStatus = that.tabIndex;
			param.inventoryPlanId = that.formData.id;
			param.productCode = that.formData.productCode;
			param.stockPositionId = this.backList.id;
			param.page = that.page - 1;
			param.barcode = that.goodsCode;
			param.size = that.pageSize;
			param.sort = 'create_time,desc';
			this.$u.get('/wms/mobile/api/queryAllByPlanStatus', param).then((res) => {
				if (res.code != 0) {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error',
					});
					return;
				}
				that.formModel = res.data.content;
				that.totalElements = res.data.totalElements;
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0,
				});
				that.canFocus = false;
				setTimeout(function () {
					that.$nextTick(function () {
						that.canFocus = true;
					});
				}, 100);
			});
		},
		subAll() {
			let listClone = JSON.parse(JSON.stringify(this.formModel));
			this.$u
				.post('/wms/mobile/api/updateInventoryPlanBill', {
					id: this.formData.id,
					inventoryPlanBillSaveRequests: listClone,
				})
				.then((res) => {
					if (res.code != 0) {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error',
						});
						return;
					}
					this.$refs.uToast.show({
						title: '盘点成功！',
						type: 'success',
						callback: () => {
							// uni.navigateBack({
							// 	delta: 1
							// });
							that.formModel = [];
							that.canFocus = true;
						},
					});
				});
		},
		initOptions() {
			this.$u.get('/wms/mobile/api/getInventoryPlans', {}).then((res) => {
				if (res.code != 0) {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error',
					});
					return;
				}
				let list = res.data;
				for (let item of list) {
					item.value = item.id;
					item.text = item.name;
				}
				this.list = list;
			});
		},
		changeModification(index, indexLit) {
			uni.showLoading({
				mask: true,
				title: '加载中...',
			});
			this.indexOut = index;
			this.indexInner = indexLit;
			this.formChange = JSON.parse(JSON.stringify(this.formModel[index]));
			this.formChange.inputNumber = null;
			this.formChange.inputNumberAux = null;
			uni.hideLoading();
			this.showModel = true;
		},
		confirmChange() {
			uni.showLoading({
				mask: true,
				title: '请稍后...',
			});
			var formChange = JSON.parse(JSON.stringify(this.formChange));
			formChange.quality = formChange.inputNumber;
			formChange.auxQuality = formChange.inputNumberAux;
			let obj = {
				productCode: JSON.parse(JSON.stringify(formChange.productCode)),
				productModel: JSON.parse(JSON.stringify(formChange.productModel)),
				productName: JSON.parse(JSON.stringify(formChange.productName)),
				productList: [JSON.parse(JSON.stringify(formChange))],
				totalNum: 0,
			};
			console.log(obj);
			this.$u
				.post('/wms/mobile/api/updateInventoryPlanBill', {
					id: this.formData.id,
					inventoryPlanBillSaveRequests: [obj],
				})
				.then((res) => {
					if (res.code != 0) {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error',
						});
						return;
					}
					uni.showToast({
						mask: true,
						icon: 'none',
						title: '提交成功',
					});
					setTimeout(function () {
						that.formModel = [];
						that.page = 1;
						uni.showLoading({
							mask: true,
							title: '请稍后...',
						});
						that.getList();
					}, 1000);
				});
		},
		confirmSelect(e) {
			let obj = e[0];
			this.formData.name = obj.label;
			this.formData.id = obj.value;
			this.$u
				.get('/wms/mobile/api/getInventoryPlanQty', {
					id: obj.value,
				})
				.then((res) => {
					if (res.code != 0) {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error',
						});
						return;
					}
					this.formData.planMaterialQty = res.data.planMaterialQty;
					this.formData.planBarcodeQty = res.data.planBarcodeQty;
				});

			this.canFocusOne = true;
		},
		// 扫描仓位
		confirmOne() {
			that.formModel = [];
			that.page = 1;
			that.goodsCode = null;
			if (!that.formData.id) {
				that.formData.code = null;
				that.$u.toast('请选择盘点方案');
				return false;
			}
			this.$u
				.post('/wms/mobile/api/stockPalaceInfoByInventoryPlan', this.formData)
				.then((res) => {
					if (res.code != 0) {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error',
						});
						that.canFocusOne = false;
						setTimeout(function () {
							that.$nextTick(function () {
								that.canFocusOne = true;
							});
						}, 100);
						return false;
					}
					this.backList = res.data;
					uni.showLoading({
						mask: true,
						title: '加载中...',
					});
					that.getList();
				})
				.catch((err) => {
					that.canFocusOne = false;
					setTimeout(function () {
						that.$nextTick(function () {
							that.canFocusOne = true;
						});
					}, 100);
				});
		},
		selectChange(e) {
			console.log(e);
			if (e != that.formData.id) {
				that.page = 1;
				that.formModel = [];
				that.formData.code = null;
				that.backList = {};
				for (let item of this.list) {
					if (item.id == e) {
						that.factoryId = item.factoryId;
						that.factoryName = item.factoryName;
						that.formData.factoryId = item.factoryId;
					}
				}
			}
		},
		confirmGoods() {
			if (!that.formData.id) {
				that.goodsCode = null;
				that.$u.toast('请选择盘点方案');
				return false;
			}
			uni.showLoading({
				mask: true,
				title: '请稍后...',
			});
			// if (!this.goodsCode) {
			// 	return false;
			// }
			that.page = 1;
			that.formModel = [];
			that.getList();
		},
	},
};
</script>

<style lang="scss">
page {
	background-color: #f8f8f8;
}

.content {
	height: 100%;
}

.oneCard {
	padding: 0 25rpx 25rpx 25rpx;
	padding-bottom: 0;
	border-radius: 10rpx;
	background-color: #fff;
}

.u-form-item {
	padding: 0 !important;
}

.btnRow {
	height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.oneLit {
	padding: 0 0 0 20rpx;
}

.modelBox {
	padding: 25rpx;
}

.innerText {
	padding-left: 10px;
	font-size: 40rpx;
}

.formStyle {
	display: flex;
	flex-flow: column;
	height: calc(100% - 80rpx);
}

.flexFull {
	flex: 1;
	overflow-y: auto;
}

/deep/.u-form-item__body {
	align-items: flex-start;
}

.isInventory-view {
	position: absolute;
	top: 90rpx;
	right: 20rpx;
	transform: rotate(20deg);
	opacity: 0.3;
	font-size: 60rpx;
	font-weight: 700;
	color: #248211;
}
</style>
